<template>
  <div class="table-query-container">
    <el-table :data="modelValue">
      <el-table-column type="index" label="序号" width="60"/>
      <slot></slot>
    </el-table>
    <el-pagination
      style="text-align: center; width: 100%"
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue'
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  queryData: {
    type: String,
    default: ''
  }
})

const pageNo = ref(1)
const pageSize = ref(10)

const handleCurrentChange = (no: number) => {
  pageNo.value = no
  doQuery()
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  pageNo.value = 1
  doQuery()
}

const total = ref(0)
const emit = defineEmits(['update:modelValue'])
const doQuery = () => {
  let data = [
    {col1: 'A1', col2: 'A2', col3: 'A3'},
    {col1: 'B1', col2: 'B2', col3: 'B3'},
    {col1: 'C1', col2: 'C2', col3: 'C3'},
    {col1: 'D1', col2: 'D2', col3: 'D3'},
    {col1: 'E1', col2: 'E2', col3: 'E3'},
    {col1: 'F1', col2: 'F2', col3: 'F3'},
    {col1: 'G1', col2: 'G2', col3: 'G3'},
    {col1: 'H1', col2: 'H2', col3: 'H3'},
  ]
  total.value = (pageNo.value - 1) * pageSize.value + data.length
  emit('update:modelValue', data)
}

onMounted(() => {
  doQuery()
})

</script>

<style scoped>
  .table-query-container {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
</style>
